<template>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
            <router-link :to="'/home/newsInfo/'+item.id">
                <img class="mui-media-object mui-pull-left" :src="item.img_url">
                <div class="mui-media-body">
                    <h3>{{item.title}}</h3>
                    <span class="time">发布时间：{{item.add_time}}</span>
                    <span class="num">访问量：{{item.click}}</span>
                </div>
            </router-link>
        </li>
    </ul>
</template>

<script>
    import {Toast} from "mint-ui"
    export default {
        name: "NewsList",
        data(){
            return{
                newsList:[]
            }
        },
        created(){
          this.getNewsList();
        },
        methods:{
            getNewsList(){
                this.$http.get("newslist.json").then(result=>{
                    if(result.body.status==0){
                        this.newsList=result.body.message;
                    }else{
                        Toast("信息加载失败！！！")
                    }

                })
            }
        }
    }
</script>

<style scoped>
    .mui-table-view .mui-media-body h3{
        font-size: 14px;
        margin-top: 2px;
    }
    .mui-table-view .mui-media-body .time{
        font-size: 12px;
        float: left;
        color: #A9A9A9;
        margin-top: 5px;
    }
    .mui-table-view .mui-media-body .num{
        font-size: 12px;
        float: right;
        color: #A9A9A9;
        margin-top: 5px;
    }
</style>